<template>
  <div class="trade-buy-log-index">
    <van-dialog
      v-model="showTradeDialog"
      show-confirm-button
      show-cancel-button
      confirm-button-text="确认转出"
      @confirm="confirmDialogTrade"
    >
      <div class="van-cell-group van-hairline--top-bottom">
        <div class="van-cell van-field van-hairline">
          <div class="van-cell__title"><span>用户名</span></div>
          <div class="van-cell__value"><input type="text" class="van-field__control" :value="currentTradeUser.account" disabled="disabled"></div>
        </div>

        <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('amount')}">
          <div class="van-cell__title"><span>数量</span></div>
          <div class="van-cell__value">
            <input v-model="formTradeFields.amount" v-validate="'required'" name="amount" type="text" placeholder="请输入数量" class="van-field__control">
            <div v-if="errors.has('amount')" class="van-field__error-message">{{ errors.first('amount') }}</div>
          </div>
        </div>

        <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safePassword')}">
          <div class="van-cell__title"><span>安全密码</span></div>
          <div class="van-cell__value">
            <input v-model="formTradeFields.safePassword" v-validate="'required|min:6'" name="safePassword" type="password" placeholder="请输入安全密码" class="van-field__control">
            <div v-if="errors.has('safePassword')" class="van-field__error-message">{{ errors.first('safePassword') }}</div>
          </div>
        </div>
      </div>
    </van-dialog>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      style="padding-bottom:50px"
    >
      <div class="van-cell van-hairline"><div class="van-cell__title" style="text-align: center;">{{ childrenUser.account }}的下级用户</div></div>

      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="item in list" :key="item.trade_sell_id" :name="item.trade_sell_id">
          <div slot="title">
            账号:{{ item.account }}
            <span v-if="item.status=='0'" class="van-tag van-hairline--surround van-tag--plain">正常</span>
            <span v-else-if="item.status=='1'" class="van-tag van-hairline--surround van-tag--plain van-tag--primary">待激活</span>
          </div>

          <div class="van-row">
            <div v-if="item.status=='0'" class="van-col van-col--12" style="text-align: center;"><van-button type="primary" @click="onClickTrade(item, 4)">转交易票</van-button></div>
            <div v-if="item.status=='0'" class="van-col van-col--12" style="text-align: center;"><van-button type="danger" @click="onClickTrade(item, 5)">转开户票</van-button></div>
            <div v-if="item.status=='0'" class="van-col van-col--24"><van-button size="mini" @click="onClickChildren(item.user_id, item.account)"  style="width: 100%">查看下级分享人</van-button></div>
            <!--<router-link v-if="item.status=='0'" :to="{name:'userTeamChildren', query: {'user_id': item.user_id, 'account': item.account }}" replace class="van-col van-col--24"><van-button style="width: 100%" size="mini">查看下级分享人</van-button></router-link>-->
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-list>
  </div>
</template>

<script>
import Vue from 'vue';
import qs from 'qs';
import { Tag, Row, Col, Cell, Field, List, Button, Collapse, CollapseItem, Dialog, Toast } from 'vant';
import ajaxVant from '../../../utils/ajaxVant';
import auth from '../../../utils/auth';

Vue.use(Dialog);

export default {
  components: {
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [List.name]: List,
    [Button.name]: Button,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem
  },
  data() {
    return {
      activeNames: [],
      list: [],
      showTradeDialog: false,
      currentTradeUser: {},
      formTradeFields: {},
      loading: false,
      finished: false,
      pager: {
        current: 1,
        limit: 6,
        totalPages: 1
      },
      childrenUser: {
        userId: 0,
        account: ''
      }
    };
  },
  methods: {
    onClickTrade(currentTradeUser, field) {
      this.showTradeDialog = true;
      this.currentTradeUser = currentTradeUser;
      this.formTradeFields['to_user_id'] = currentTradeUser.user_id;
      this.formTradeFields['field'] = field;
    },
    onClickChildren(userId, account) {
      this.activeNames = [];
      this.list = [];
      this.showTradeDialog = false;
      this.currentTradeUser = {};
      this.formTradeFields = {};
      this.loading = false;
      this.finished = false;
      this.pager = {
        current: 1,
        limit: 6,
        totalPages: 1
      };
      this.childrenUser = {
        userId: userId,
        account: account
      };
      this.onLoad();
    },
    confirmDialogTrade() {
      var _this = this;
      _this.showTradeDialog = true;

      _this.$validator.validateAll().then((result) => {
        if (result) {
          auth.getToken().then(function(token) {
            ajaxVant.post('/user/trade?token=' + token, qs.stringify(_this.formTradeFields)).then(function(data) {
              if (data !== false) {
                Toast(data.msg);
                _this.formTradeFields = {};
              }
            });
          });
          _this.showTradeDialog = false;
        }
      });
    },
    onLoad() {
      var _this = this;
      _this.loading = true;
      if (_this.pager.current > _this.pager.totalPages) {
        _this.finished = true;
        _this.loading = false;
        return false;
      }

      ajaxVant.get('/user/team/children?page=' + _this.pager.current + '&limit=' + _this.pager.limit + '&user_id=' + _this.childrenUser.userId).then(function(data) {
        if (data !== false && typeof (data.pager) !== 'undefined') {
          if (typeof (data.pager.items) === 'undefined' || data.pager.items.length <= 0) {
            _this.finished = true;
          } else {
            for (var i in data.pager.items) {
              _this.list.push(data.pager.items[i]);
            }

            _this.pager.totalPages = data.pager.total_pages;
          }
        } else {
          _this.finished = true;
        }

        _this.pager.current += 1;
        _this.loading = false;
      });
    }
  },
  mounted() {
    this.childrenUser.userId = this.$route.query.user_id;
    this.childrenUser.account = this.$route.query.account;
  }
};

</script>
